<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .page {
      display: inline-block;
      padding: 10px;
      color: #666;
      margin-left: 5px;
      cursor: pointer;
    }
    .page:hover {
      background-color: #56a5f1;
      color: white;
    }
    .active {
      text-decoration: underline;
    }
    .active:hover {
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>v-for的高级使用</h1>
    <span v-for="(hero,i) in heros" :data-index="i">
      {{i+1}}. {{hero}} 
    </span>
    <hr>
    <p>v-for遍历对象</p>
    <p v-for="(val, key, index) in heroDetail">
      {{index+1}}.{{key}}:{{val}}
    </p>
    <hr>
    <p>v-for迭代整数</p>
    <span v-for="num in 5">{{num}}</span>
    <hr>
    <p>通过v-for模拟分页功能</p>
    <span v-show="currentPage != 1" class="page" @click="changePage(--currentPage)">
      上一页
    </span>
    <span v-for="num in 5" :class="['page', {active: currentPage == num}]"
      @click="changePage(num)">
      {{num}}
    </span>
    <span v-show="currentPage != 5" class="page" @click="changePage(++currentPage)">
      下一页
    </span>
    <hr>
    <span>前端工程师投送地：</span>
    <span v-for="location in locationList"> {{location}}、</span>
    <br>
    <input type="text" v-model="val">
    <button @click="aoligei">奥利给</button>
    <button @click="listSort">sort</button>
    <button @click="listReverse">reverse</button>
    <button @click="changeLen">changeLen</button>
    <button @click="changeItem">changeItem</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        heros: [
          '露娜',
          '鲁班',
          '后裔',
          '小乔',
          '程咬金'
        ],
        heroDetail: {
          name: '露娜',
          position: 'mid',
          type: 'ap',
          gender: 'female'
        },
        // 当前页
        currentPage: 1,
        locationList: [
          '上海',
          '杭州',
          '无锡',
          '苏州',
          '南京',
          '杭州',
          '广州',
          '深圳'
        ],
        val: ''
      },
      methods: {
        changePage(num) {
          if(this.currentPage != num) {
            this.currentPage = num;
          }
        },
        aoligei() {
          this.locationList.push(this.val);
          this.val = '';
        },
        listSort() {
          this.locationList.sort()
        },
        listReverse() {
          this.locationList.reverse()
        },
        changeLen() {
          // this.locationList.length = 6
          this.locationList.splice(6)
        },
        changeItem() {
          // this.locationList[6] = '荥阳';
          this.locationList.splice(6,1,'荥阳')
        }
       },
    })
  </script>
</body>
</html>